<template>
<div>
  <div class="m_tb10 banner-box">
    <banner :imgurl=imgurl :bheight="bheight"></banner>
  </div>
  <div class="college-body">
    <div class="search-tap">
      <span>培训学院</span>
      <div class="lookmore" @click="lookmoresth">
        <span class="more">查看更多</span>
        <img src="../../assets/img/college/images/more_12.png" alt="" class="moreimg-box">
      </div>

      <div class="search-box">
        <div class="allSelect">
          <select v-model="value" class="selectbtn" @click="selectFn">
            <option 
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
             ></option>
          </select>
        </div>
        <div class="searchBody">
          <input type="text" class="searchBox" placeholder="搜索" v-model.trim="searchVal" @keyup="selectFn($event)">
          <button class="searchBtn" @click="selectFn">搜索</button>
          <img src="../../assets/img/college/images/searchicon_06.png" alt="" class="searchImg">
        </div>
      </div>

    </div>
    <div class="college-content">
      <ul>
        <li v-for="(item,index) in content" :key="index">
          <router-link :to="{name:'collegeVideo',query:{id:item.id}}">
            <div class="item-img">
              <img v-if="item.cover_picture" :src=item.cover_picture alt="">
              <img v-if="!item.cover_picture" src="../../assets/img/college/images/item-img_27.png" alt="">
            </div>
            <p>{{item.title }}</p>
            <div class="other">
              <img src="../../assets/img/college/images/look_41.png" alt="" class="look">
              <span>{{item.click }}</span>
              <img src="../../assets/img/college/images/share_43.png" alt="" class="share">
              <span>{{item.create_time}}</span>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</div>
</template>

<script>
import SearchBtn from './searchBtn'
import Banner from '../Banner'
    export default {
      name: "collegeSearch",
      components: {
        SearchBtn,
        Banner
      },
      data(){
          return{
            // options:[],  //下拉菜单
            options: [
              {
              value: '2',
              label: '全部'
              },{
              value: '1',
              label: '视频'
              }, {
              value: '0',
              label: '图文'
            }],
            value: 2,
            content:[],  //展示内容
            imgurl:[],
            bheight: '1.9rem',
            page: 1,
            typeval:2,
            searchVal: ''
          } 
      },

      created(){ 
       

         if(localStorage.getItem('seachval')){
            this.searchVal = localStorage.getItem('seachkey')
          }
          if(localStorage.getItem('typeval')){
              this.value = localStorage.getItem('typeval')
          }

          this.https("master/getObtainInformationList",{type:this.value,page: this.page,search:this.searchVal}).then(data => { //搜索结果
             this.content = data.data.slice(0,8);
             localStorage.removeItem('seachval')
             localStorage.removeItem('typeval')
                
            
          });

          //  this.getlist()
      
        this.https("index/getObtainBannerList",{}).then( //得到banner图列表
        data => {
            this.imgurl = data
            // console.log(data)
        });
      },
      methods:{
        selectFn(){
            this.getlist()

        },
        getlist(){        
          this.https("master/getObtainInformationList",{type:this.value,page: this.page,search:this.searchVal}).then(data => { //搜索结果
             this.content = data.data.slice(0,8);
             localStorage.setItem('seachval', this.searchVal)
             localStorage.setItem('typeval', this.value)         
          });
        },
        // banner图片
        imgUrl(imgUrl){
          this.imgurl=imgUrl;
        },
        // 下拉菜单选项值
        childByValue(value){
          this.options = value
        },
        // 搜索结果
        resultDatafun(list){
          this.content = list.slice(0,8);
        },
        //查看更多
        lookmoresth(){
          this.$router.push('searchLookmore')
        }
      }
    }
</script>

<style scoped>
  @import url(../../assets/css/college/collegesearch.less);
  @import url(../../assets/css/college/searchbtn.less);

</style>
<style>
.college-body .selectbtn{
      width: 0.54rem;
      height: 0.25rem;
      background-color: #ffffff;
      border: 0.01rem solid #DDDDDD;
      cursor: pointer;
    }
 .college-body select {  
    border: solid 1px #dddddd;
    appearance:none;   
    background: url("../../assets/img//plan/images/selectbtn_03.png") no-repeat scroll center transparent; 
    background-position: 0.35rem;
    padding:0 0.03rem;  
  } 
</style>

